<template>
  <ContentModal
    v-model:show="showModel"
    :title="title"
    :landscape-size="{
      width: '1000px',
      height: '500px',
    }"
    :portrait-size="{
      width: '600px',
      height: '600px',
    }"
  >
    <template #default>
      <view class="content">
        <view class="text">{{ getInstruction() }}</view>
        <view class="img">
          <tm-image
            preview
            :src="getCurrDescImgPath()"
            model="aspectFit"
            :width="imgWidth"
            :height="imgHeight"
          ></tm-image>
        </view>
      </view>
    </template>
    <template #button>
      <view class="btns"></view>
      <tm-button
        block
        :margin="[0, 0]"
        :round="-1"
        @click="hdCheck"
        color="#0085ff"
        >确认</tm-button
      >
    </template>
  </ContentModal>
</template>

<script setup lang="ts">
import ContentModal from '@/components/contentModal.vue'
import { imgHeight, imgWidth } from '@/utils/fontSizeHandler';
import { getCurrDescImgPath, getInstruction } from '@/utils/sheets'
import { computed } from 'vue'

const props = defineProps<{
  show: boolean
  title: string
  checkColor?: string
  content: string
}>()

const emit = defineEmits<{
  (e: 'update:show', value: boolean): void
  (e: 'check'): void
  (e: 'cancel'): void
}>()

const showModel = computed({
  get() {
    return props.show
  },
  set(value) {
    emit('update:show', value)
  },
})

const hdCheck = () => {
  showModel.value = false
  emit('check')
}
const hdCancel = () => {
  showModel.value = false
  emit('cancel')
}
</script>

<style scoped>
.content {
  width: 100%;
  height: 400px;
  .text {
    white-space: pre-line;
  }
  .img {
    width: 100%;
    overflow: scroll;
  }
}
.btns {
  width: 100%;
}
</style>
